<template>
  <div class="main-container">
    <div class="title-area">Mitt Data Sender</div>
    <div class="divider-line"></div>
    <button class="btn" @click="add">Send</button>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { emitter } from '../../../modules/event-bus';

const count = ref<number>(0);

const add = () => {
  count.value += 1;
  emitter.emit('share-number', count.value);
}
</script>

<style scoped>
.main-container {
  width: 100%;
  background-color: rgb(218, 50, 126);
  display: flex;
  flex-direction: column !important;

  .title-area {
    margin: 0 auto;
  }

  .btn {
    width: 40px;
    margin: 0 auto;
  }
}
</style>